<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
                :label="item.label"
                :name="item.msgStatus"
                v-for="(item, key) in tablist"
                :key="key"
                lazy
            >
                <com-filterTable
                    ref="filterTable"
                
                    services="noticeList"
                
                    title="业务系统配置"
                
                    :table-border="true"
                    :showFormFilter="false"
                    :showRequestNum="false"
                    :topRightOperationLine="false"
                    
                    :table-column="item.columnConfig"
                
                    :autoLoad="true"
                    filterLabelWidth="90px"
                    :tableBorder="false"
                    labelPosition="right"
                    :params="{
                        jobNo:item.jobNo,
                        msgStatus:item.msgStatus
                    }"
                    :filterCol="2"
                    :filterInline="false"
                  
                />
            </el-tab-pane>

        </el-tabs>
   </div>

</template>

<script>
import service from "@/service";
export default {
   
    data() {
        return {
            activeName:'0'
        };
    },

    computed: {

        tablist() {
            return [
                {
                    label: "未读",
                    msgStatus: "0",
                    jobNo:this.$tool.getBaseInfo().staffId,
                    columnConfig: this.columnConfig,
                },
                {
                    label: "已读",
                    msgStatus: "1",
                    jobNo:this.$tool.getBaseInfo().staffId,
                    columnConfig: this.readedcolumnConfig,
                }
               
            ];
        },
        columnConfig(){

            return [
                { label: "", type: "index" ,align:'center'},

                { label: "消息抬头", value: "msgTitle" ,align:'center'},
                {
                    label: "提醒时间",
                    value: "msgTime"
                    ,align:'center'
                    
                },

                { label: "消息内容", value: "msgContent" ,align:'center'},
                {
                    label: "是否已读",
                    value: "msgStatus",
                    align:'center',
                    type: "render",
                    render: (h, { data: { row } }) => {
                        const state = {
                            0: "未读",
                            1: "已读",
                        };
                        return <span>{state[row.msgStatus]} </span>;
                    },
                },
                {
                    label: "操作",
                    align:'center',
                    type: "render",
                    render: (h, { data: { row } }) => {
                        const readingFun=async ()=>{
                            let result = await service("updateNoticeStatus", {
                                data: {
                                    msgId:row.msgId
                                }
                            });
                            if(result.status=='0000'){
                                this.resetOut() 
                            }       
                        }
                        return <span class="blue-text-button " on-click={readingFun}>设为已读 </span>;
                    },
                },
            ]
        },
        readedcolumnConfig(){

            return [
                // { type: "select" },
                { label: "", type: "index" ,align:'center'},

                { label: "消息抬头", value: "msgTitle" ,align:'center'},
                {
                    label: "提醒时间",
                    value: "msgTime",
                    align:'center',
                },

                { label: "消息内容", value: "msgContent" ,align:'center'},
                {
                    label: "是否已读",
                    value: "msgStatus",
                    align:'center',
                    type: "render",
                    render: (h, { data: { row } }) => {
                        const state = {
                            0: "未读",
                            1: "已读",
                        };
                        return <span>{state[row.msgStatus]} </span>;
                    },
                },
            ]
        }
    },
    methods: {
        handleClick(tab, event) {
            this.resetOut()
        },

        resetOut() {
            let index=Number(this.activeName)
            this.$refs.filterTable[index].operationHandle({ handle: "query" }); //查询
        },

    },
    
    
};
</script>

